@extends('layouts.admin')
@section('pageTitle', '新建投放')
@inject('storeService', 'App\App\Services\StorageService')
@section('style')
    <style>

        /*meiyun*/
        .mgud{
            margin: 20px auto;
        }
        .mgb10{
            margin-bottom: 10px;
        }
        .mgr30{
            margin-right: 30px;
        }
        /*.main-panel{*/
            /*overflow: auto;*/
        /*}*/

        .card form [class*="col-"]:first-child {
            padding: 0 6px;
        }

        .card form [class*="col-"]:last-child {
            padding: 0 6px;
        }

        .template-active-img img {
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .template-active-img .user-template-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -22px;
        }
        .template-active-img .template-qrcode {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            display: none;
        }
        .template-active-img:hover .template-qrcode{
            display:block
        }
    </style>
@endsection
@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="content content-full-width">

                                <form id="wizardForm" class="form-horizontal" data-back="/web/activityDelivery/index"  method="post" action="/web/activityDelivery/modify" >

                                    <div class="row">
                                        <div class="col-xs-4 app">
                                            <div class="phone-view">
                                                <div class="app-view">
                                                    <div class="point-app-mainC">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">规则名称</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <input class="form-control point-rule-name" type="text"
                                                                   placeholder="请输入规则名称，最多支持20个字符"
                                                                   maxlength=20
                                                                   name="name"
                                                                   required="required"
                                                                   data-msg="请输入规则名称，最多支持20个字符"
                                                                   value="{{$deliveryData['name']}}"

                                                            />
                                                            <input type="text" style="display: none;" name="id" value="{{$deliveryData['id']}}" />
                                                        </div>
                                                    </div>
                                                    @if(empty($pointData))
                                                        <div class="form-group">
                                                            <label class="col-sm-2 col-sm-offset-1 control-label">活动位置</label>
                                                            <div class="col-sm-7 col-sm-offset-1">
                                                                <a href="/web/activityPoint/index?action=new_point" target="_self">请先完成位置埋点</a>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="form-group">
                                                            <label class="col-sm-2 col-sm-offset-1 control-label">活动位置</label>
                                                            <div class="col-sm-7 col-sm-offset-1">
                                                                @foreach($pointData as $key=>$val )
                                                                    <label class="radio-inline">
                                                                        <input type="radio" name="point_id" class="" value="{{$val['id']}}" @if($val['id']==$deliveryData['point_id'])checked @endif> {{$val['point_name']}}
                                                                    </label>
                                                                @endforeach

                                                            </div>
                                                        </div>
                                                    @endif
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">选择平台</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="platform[]" class="" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_JS}}" @if(($deliveryData['platform'] & \App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_JS) == \App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_JS) checked @endif > Js
                                                            </label>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="platform[]" class="" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_IOS}}" @if(($deliveryData['platform'] & \App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_IOS) == \App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_IOS) checked @endif> iOS
                                                            </label>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="platform[]" class="" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_ANDROID}}" @if(($deliveryData['platform'] & \App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_ANDROID) == \App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_ANDROID) checked @endif> Android
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">投放类型</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" class="point-put-category-banner" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_BANNER}}"  @if($deliveryData['type']==\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_BANNER)checked @endif > Banner
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" class="point-put-category-home" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_HOME}}" @if($deliveryData['type']==\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_HOME)checked @endif> 启动页
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" class="point-put-category-flow" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_INFO_FLOW}}" @if($deliveryData['type']==\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_INFO_FLOW)checked @endif> 信息流
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-sm-9 col-sm-offset-2">
                                                            <ul class="nav nav-tabs" role="tablist">
                                                                {{--<li style="float: left" class="add-pointput-inf"><i class="fa fa-plus"></i></li>--}}
                                                                {{--<li  class="active"  id="tab_seed_1">--}}
                                                                    {{--<a href="#tab_container_1" role="tab" data-toggle="tab" aria-expanded="true">--}}
                                                                        {{--ID1--}}
                                                                        {{--<i class="glyphicon glyphicon-remove small" tabclose="tab_seed_1" style="position: absolute;right:4px;top: 4px;"  onclick="closeTab(this)"></i>--}}
                                                                    {{--</a>--}}
                                                                {{--</li>--}}

                                                                <li   class="active"   id="tab_seed_1">
                                                                    <a href="#tab_container_1" role="tab" data-toggle="tab" aria-expanded="true" style="position: relative;padding:2px 20px 2px 15px">
                                                                        ID1
                                                                        <i class="glyphicon glyphicon-remove small" tabclose="tab_seed_1" style="position: absolute;right:4px;top: 4px;"  onclick="closeTab(this)"></i>
                                                                    </a>
                                                                </li>

                                                            </ul>
                                                            <div class="tab-content">
                                                                    <input type="hidden" name="detail[0][id]" value="{{$deliveryData['id']}}" />
                                                                        <div role="tabpanel" class="tab-pane   active"  id="tab_container_1" style="width: 100%;" data-index="0">
                                                                            <div class="row">
                                                                                <div class="col-sm-12">
                                                                            <div class="card">
                                                                                <div class="content content-full-width">
                                                                                    <!--有效时间-->
                                                                                    <div class="form-group">
                                                                                        <label class="col-sm-2 control-label">有效时间</label>
                                                                                        <div class="col-sm-7">
                                                                                            <div class="row service-charges">
                                                                                                <div class="col-sm-5 service-charges-name service-charges-name-0" style="padding-left: 15px;">
                                                                                                    <input type="text" placeholder="开始时间" value="{{date('Y-m-d H:i:s',$deliveryData['begin_time'])}}"  required="required" data-name="begin_time" name="detail[0][begin_time]" data-msg="请输入开始时间" class="form-control datetimepicker">
                                                                                                </div>
                                                                                                <div class="col-sm-5 service-charges-remark service-charges-remark-0">
                                                                                                    <input type="text" placeholder="结束时间" value="{{date('Y-m-d H:i:s',$deliveryData['end_time'])}}"  required="required" data-msg="请输入结束时间" data-name="end_time" name="detail[0][end_time]" class="form-control datetimepicker">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <!--投放活动-->
                                                                                    <div class="form-group">
                                                                                        <label class="col-sm-2 control-label">投放活动</label>
                                                                                        <div class="col-sm-7">
                                                                                            <div class="input-group">
                                                                                                <input type="text" class="form-control" value="{{$deliveryData['act_id']}}"  data-name="act_id" name="detail[0][act_id]" style="display: none;" placeholder="+添加活动" aria-label="添加活动">
                                                                                                <input type="text" class="form-control"  value="{{$deliveryData['act_name']}}" data-name="act_name" name="detail[0][act_name]" placeholder="+添加活动" aria-label="添加活动" onclick="show_activity_deliveries(this)">
                                                                                                <div class="input-group-btn">
                                                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@if($deliveryData['act_type']==1)列表活动 @else自有活动 @endif<span class="caret"></span></button>
                                                                                                    <input type="text" style="display: none;" class="form-control" value="{{$deliveryData['act_type']}}" data-name="act_type" name="detail[0][act_type]" placeholder="+活动类型" aria-label="活动类型">
                                                                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                                                                        <li><a href="#" data-val="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_ACT_TYPE_LIST}}" onclick="actType(this)">列表活动</a></li>
                                                                                                        <li><a href="#" data-val="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_ACT_TYPE_SELF}}" onclick="actType(this)">自有活动</a></li>
                                                                                                    </ul>
                                                                                                </div><!-- /btn-group -->
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <!--更换背景-->
                                                                                    <div class="form-group backgroundImg-container" >
                                                                                        <label class="col-sm-2 control-label">更换背景</label>
                                                                                        <div class="col-sm-7">
                                                                                            <input type="file" name="upfile" accept="image/gif,image/jpeg,image/png" data-target="uploadImageFile" data-for="detail[0][img_url]" data-preview-file-type="text" class="form-control" value="" title="">
                                                                                            <input type="hidden"  name="detail[0][img_url]" data-preview="{{$storeService->tomedia($deliveryData['img_url'])}}" value="{{$deliveryData['img_url']}}"/>
                                                                                            <span class="help-block">支持PNG、JPG格式，小于50KB</span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <!--触发用户-->
                                                                                    <div class="form-group">
                                                                                        <label class="col-sm-2 control-label">触发用户</label>
                                                                                        <div class="col-sm-7">
                                                                                            <select class="form-control" data-name="target" name="detail[0][target]">
                                                                                                <option value="1" @if($deliveryData['target'] == 1) selected @endif>所有用户</option>
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="footer pull-center">

                                        <input type="submit" class="btn btn-info btn-fill btn-wd btn-finish sponsor_sur" value="完成"/>

                                        <div class="clearfix"></div>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('script')
    <script src="/js/admin/closable-tab-div.js"></script>
    <script>
        function beforeSubmitValidate() {
            var checkedPlatform = $("input:checkbox[name='platform[]']:checked").length;
            var type = $("input:radio[name='type']:checked").length;
            var name = $('input[name="name"]').val();
            var point_id = $('input[name="point_id"]').val();
            name = name.trim();

            if(name == ''){
                utils.showNotification('规则名称不能为空',3);
                return false;
            }else if(name.length>20){
                utils.showNotification('规则名称不能大于20个字符集',3);
                return false;
            }
            if(point_id == ''){
                utils.showNotification('请选择活动位置',3);
                return false;
            }
            if(checkedPlatform == 0){
                utils.showNotification('请选择平台',3);
                return false;
            }
            if(type == 0){
                utils.showNotification('请选择投放类型',3);
                return false;
            }
            var hasError =false;
            $('.tab-pane').each(function (i,v) {
                var index = $(v).data('index');
                var begin_time = $('input[name="detail['+index+'][begin_time]"]').val();
                var end_time= $('input[name="detail['+index+'][end_time]"]').val();
                var addAction=$('input[name="detail['+index+'][act_name]"]').val();
                var actionType=$('input[name="detail['+index+'][act_type]"]').val();
                var ts=/^((https|http)?:\/\/)[^\s]+/;
                var start=moment(begin_time).unix();
                var end=moment(end_time).unix();
                if (!begin_time||!end_time){
                    console.log(begin_time);
                    utils.showNotification('请将ID'+(index+1)+'中的信息填写完整',3);
                    hasError = true;
                    return false;
                }else if(start>end) {
                    utils.showNotification('ID' + (index + 1) + '中开始时间不能大于结束时间', 3);
                    hasError = true;
                    return false;
                }else if(!addAction){
                    utils.showNotification('请添加ID' + (index + 1) + '中的投放活动', 3);
                    hasError = true;
                    return false;
                }else if(addAction&&actionType==2&&!ts.test(addAction)){
                    utils.showNotification('请在ID' + (index + 1) + '中添加正确的投放活动地址，如：http://', 3);
                    hasError = true;
                    return false;
                }
            });
            if (hasError){
                return false;
            }
            return true;
        }


        $(document).ready(function () {
            $('.point-put-category-banner').click(function () {
                $('.point-app-mainC').css('background-image','url(/images/admin/put_banner.png)');
            });
            $('.point-put-category-home').click(function () {
                $('.point-app-mainC').css('background-image','url(/images/admin/put_home_page.png)');
            });
            $('.point-put-category-flow').click(function () {
                $('.point-app-mainC').css('background-image','url(/images/admin/put_flow.png)');
            });
            $('.point-rule-name').blur(function () {
                if($('.point-rule-name').val()==''){
                    $('.point-rule-name').attr('placeholder','请输入规则名称，最多支持20个字符');
                }
            });

            window.pointid = 1;
//            var item = {'id': window.pointid, 'name': 'ID' + window.pointid, 'closable': false};
//            closableTab.addTab(item);

            <!--添加投点详情-->

            $('.add-pointput-inf').click(function () {

                window.pointid++;
                var name ='ID'+window.pointid;
                var uri ='/web/activityPoint/addPointTV';
                var closable = 1;
                var item = {'id':window.pointid,'name':name,'closable':closable==1?true:false};
                closableTab.addTab(item);

            });

        });

        <!--购买奖品表格-->

        window.operateEvents = {
            'click .operate_buyprize':function (e,value,row) {
                var utilprice=row.prize_money;
                $('.modal-count-price').empty();
                $('.modal-buy-prizenumber').val('');
                $('.modal-unit-price').empty();
                $('.modal-unit-price').html(utilprice+"元");
                $('.modal-buy-prizenumber').on('input',function () {
                    var number=$(this).val();
                    var sum=number*utilprice;
                    $('.modal-count-price').empty();
                    $('.modal-count-price').html(sum+"元");
                })
            }

        };

        $('#bootstrap-table-container').on('post-body.bs.table',function () {
            $('[rel="tooltip"]').tooltip();
        });
        //点击投放活动事件
        function actType(obj){
            var act_type = $(obj).data('val');
            var oo =$(obj).parent().parent().prev();
            oo.val(act_type);//设置数值
            if(act_type == "{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_ACT_TYPE_LIST}}"){
                $('input[aria-label="添加活动"]').attr('placeholder','+添加活动');
                oo.prev().text('列表活动');
            }else{
                $('input[aria-label="添加活动"]').attr('placeholder','请输入活动地址：(示例) http://');
                oo.prev().text('自有活动');
            }
        }
        var globObj;
        //关闭tab
       function closeTab(item){
            window.pointid--;
            var val = $(item).attr('tabclose');
            var containerId = "tab_container_"+val.substring(9);

            if($('#'+containerId).hasClass('active')){
                $('#'+val).prev().addClass('active');
                $('#'+containerId).prev().addClass('active');
            }
            $("#"+val).remove();
            $("#"+containerId).remove();
        }
        function operateFormatter(value, row) {
            return '<a class="btn btn-warning btn-fill selectActivity">选取</a>';
        }
        window.operateEvents = {
            'click .selectActivity':function (e,value,row) {
                //给选择框设置数据
                $(globObj).val(row.name);
                $(globObj).prev().val(row.id);
            }
        };
        function show_activity_deliveries(obj) {
            var vv = $(obj).next().children('input[data-name="act_type"]').val();
            globObj = obj;
            // 判断：1-列表活动  2-自有活动
            if(vv == "{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_ACT_TYPE_LIST}}") {
                $addprize = utils.modal('选择活动', function (ele) {
                    var category = $('input[name="category"]').val();
                    var html = '<table class="table-responsive" id="activitySelectTable">' +
                        '<thead><tr>' +
                        '<th data-field="name">活动名称</th>' +
                        '<th data-field="model.name" data-formatter="categoryFormatter">类型</th>' +
                        '<th data-field="created_at">创建时间</th>' +
                        '<th data-field="startTime">有效期</th>' +
                        '<th data-field="actions" class="td-actions text-center" data-events="operateEvents" data-formatter="operateFormatter">操作</th>' +
                        '</tr></thead>' +
                        '</table>';
                    ele.find('.modal-body').html(html);
                    var table_option = {
                        searchAlign: 'left',
                        queryParams: function (query) {
                            query['category'] = "{{\App\Models\Activity\Activity::ACTIVITY_CATEGORY_H5}}";
                            return query;
                        },
                        url: '/web/activity/list'
                    };
                    default_table_option = $.extend(default_table_option, table_option);
                    $('#activitySelectTable').bootstrapTable(default_table_option);
                    $('#activitySelectTable').on('click', '.selectActivity', function () {
                        $addprize.modal('hide');
                    })
                }, false, function (res) {
                    if (res == 1) {
                        $addprize.modal('hide');
                    }
                })
            }
        }
    </script>
@endsection